<template>
  <div class="admin-dashboard">
    <el-row>
      <el-col :span="4">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router>
          <el-menu-item index="admin">
            <i class="el-icon-s-home"></i>
            <span>仪表盘</span>
          </el-menu-item>
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-s-management"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="admin/system-settings">系统设置</el-menu-item>
            <el-menu-item index="admin/news">新闻管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-user"></i>
              <span>会员管理</span>
            </template>
            <el-menu-item index="admin/members">会员信息</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-s-shop"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="admin/rooms">房间信息</el-menu-item>
            <el-menu-item index="admin/seats">座位信息</el-menu-item>
            <el-menu-item index="admin/dishes">菜品信息</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="admin/room-orders">房间订单</el-menu-item>
            <el-menu-item index="admin/seat-orders">座位订单</el-menu-item>
            <el-menu-item index="admin/dish-orders">菜品订单</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template #title>
              <i class="el-icon-s-comment"></i>
              <span>评价管理</span>
            </template>
            <el-menu-item index="admin/messages">留言管理</el-menu-item>
            <el-menu-item index="admin/comments">评价管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统概览</span>
          </div>
          <el-row>
            <el-col :span="6" v-for="card in overviewCards" :key="card.id">
              <el-card class="stat-card">
                <div class="stat-icon">
                  <i :class="card.icon"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-title">{{ card.title }}</div>
                  <div class="stat-value">{{ card.value }}</div>
                  <div class="stat-trend">
                    <span :class="card.trend > 0 ? 'up' : 'down'">
                      {{ card.trend > 0 ? '↑' : '↓' }}{{ Math.abs(card.trend) }}%
                    </span>
                    <span class="compared">较上月</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        
        <el-row class="mt-20">
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>订单统计</span>
              </div>
              <div>
                <!-- 这里应该是一个图表 -->
                <div class="chart-placeholder">订单统计图表将显示在这里</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>最近订单</span>
              </div>
              <div>
                <el-table :data="recentOrders" stripe>
                  <el-table-column prop="orderNumber" label="订单号"></el-table-column>
                  <el-table-column prop="type" label="订单类型"></el-table-column>
                  <el-table-column prop="username" label="客户名称"></el-table-column>
                  <el-table-column prop="amount" label="金额"></el-table-column>
                  <el-table-column prop="status" label="状态"></el-table-column>
                  <el-table-column prop="createTime" label="创建时间"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      activeMenu: this.$route.path,
      overviewCards: [
        {
          id: 1,
          title: '今日订单',
          value: '128',
          icon: 'el-icon-s-order',
          trend: 12.5
        },
        {
          id: 2,
          title: '今日收入',
          value: '¥28,560',
          icon: 'el-icon-s-finance',
          trend: 8.2
        },
        {
          id: 3,
          title: '会员总数',
          value: '2,563',
          icon: 'el-icon-user',
          trend: 3.1
        },
        {
          id: 4,
          title: '评论总数',
          value: '1,842',
          icon: 'el-icon-chat-dot-round',
          trend: -2.3
        }
      ],
      recentOrders: [
        {
          orderNumber: 'ORD-20250709-001',
          type: '房间预订',
          username: '张三',
          amount: '¥899.00',
          status: '已完成',
          createTime: '2025-07-09 10:23:45'
        },
        {
          orderNumber: 'ORD-20250709-002',
          type: '座位预订',
          username: '李四',
          amount: '¥399.00',
          status: '已确认',
          createTime: '2025-07-09 09:45:12'
        },
        {
          orderNumber: 'ORD-20250709-003',
          type: '菜品订单',
          username: '王五',
          amount: '¥568.00',
          status: '已支付',
          createTime: '2025-07-09 08:30:27'
        },
        {
          orderNumber: 'ORD-20250708-015',
          type: '房间预订',
          username: '赵六',
          amount: '¥1299.00',
          status: '已取消',
          createTime: '2025-07-08 23:15:38'
        },
        {
          orderNumber: 'ORD-20250708-014',
          type: '菜品订单',
          username: '钱七',
          amount: '¥789.00',
          status: '已完成',
          createTime: '2025-07-08 21:45:03'
        }
      ]
    }
  },
  watch: {
    $route(to, from) {
      this.activeMenu = to.path;
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  min-height: 100vh;
}

.stat-card {
  display: flex;
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e4f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.stat-icon i {
  font-size: 24px;
  color: #409eff;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin: 5px 0;
}

.stat-trend {
  font-size: 14px;
}

.up {
  color: #67c23a;
}

.down {
  color: #f56c6c;
}

.compared {
  color: #909399;
  margin-left: 5px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.mt-20 {
  margin-top: 20px;
}
</style>    